<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>debug3</title>
		<style>
			body
			{
				margin: 0;
				background-color: black;
			}
			#bg
			{
				position: absolute;
				height: 1200px;
				width: 900px;
				border: solid 2px springgreen;
			}
			#d0
			{
				position: absolute;
				margin: 200px;
				text-align: center;
			}
			@keyframes ct0
			{
				0%{
					transform: rotate3d(0,0,0,0deg);
					border: 3px solid aqua;
				}
				50%
				{
					transform: rotate3d(1,.7,.5,180deg);
					border: 3px solid red;
				}
				100%
				{
					transform: rotate3d(.4,.2,.8,360deg);
					border: 3px solid aqua;
				}
			}
			@keyframes ct1
			{
				0%{
					transform: rotate3d(0,0,0,0deg);
					border: 3px solid aqua;
				}
				50%
				{
					transform: rotate3d(.1,.2,.8,180deg);
					border: 3px solid red;
				}
				100%
				{
					transform: rotate3d(.8,.5,.3,360deg);
					border: 3px solid aqua;
				}
			}
			@keyframes ct2
			{
				0%{
					transform: rotate3d(0,0,0,0deg);
					border: 3px solid aqua;
				}
				50%
				{
					transform: rotate3d(.4,.7,.1,180deg);
					border: 3px solid red;
				}
				100%
				{
					transform: rotate3d(.2,.3,.7,360deg);
					border: 3px solid aqua;
				}
			}
			@keyframes ct3
			{
				0%{
					border: 1px solid aqua;
					left: 0px;
					width: 500px;
				}
				10%{
					border: 1px solid aqua;
					left: 0px;
					width: 500px;
				}
				20%
				{
					border: 1px solid red;
					left: 240px;
					width: 20px;
				}
				80%
				{
					border: 1px solid red;
					left: 240px;
					width: 20px;
				}
				90%{
					border: 1px solid aqua;
					left: 0px;
					width: 500px;
				}
				100%
				{
					border: 1px solid aqua;
					left: 0px;
					width: 500px;
				}
			}
			@keyframes ct4
			{
				0%{
					border: 1px solid aqua;
					top: 0px;
					height: 500px;
				}
				10%{
					border: 1px solid aqua;
					top: 0px;
					height: 500px;
				}
				20%
				{
					border: 1px solid red;
					top: 240px;
					height: 20px;
				}
				80%
				{
					border: 1px solid red;
					top: 240px;
					height: 20px;
				}
				90%{
					border: 1px solid aqua;
					top: 0px;
					height: 500px;
				}
				100%
				{
					border: 1px solid aqua;
					top: 0px;
					height: 500px;
				}
			}
			.mgc
			{
				display: block;
				position: absolute;
				background-color: transparent;
				border: 3px solid aqua;
			}
			#d0d1
			{
				height: 500px;
				width: 500px;
				border-radius: 100%;
				animation:ct0 2s infinite linear;
				border-bottom: transparent;
				border-left: transparent;
				
			}
			#d0d2
			{
				left: 125px;
				top: 125px;
				height: 250px;
				width: 250px;
				animation:ct2 2s infinite linear;
				animation-delay: 0.25s;
			}
			#d0d3
			{
				left: 125px;
				top: 125px;
				height: 250px;
				width: 250px;
				animation:ct1 2s infinite linear;
			}
			#d0d4
			{
				left: 100px;
				top: 100px;
				height: 300px;
				width: 300px;
				border-radius: 100%;
				animation:ct0 2.5s infinite linear;
			}
			#d0d5
			{
				left: 75px;
				top: 75px;
				height: 350px;
				width: 350px;
				animation:ct2 3s infinite linear;
			}
			#d0d6
			{
				left: 75px;
				top: 75px;
				height: 350px;
				width: 350px;
				animation:ct0 3.5s infinite linear;
				animation-delay: 0.5s;
			}
			#d0d7
			{
				left: 74px;
				top: 74px;
				height: 352px;
				width: 352px;
				border-radius: 100%;
				animation:ct1 5s infinite linear;
			}
			#d0d8
			{
				left: -2px;
				top: -2px;
				height: 500px;
				width: 500px;
				border-radius: 100%;
				animation:ct2 3s infinite linear;
			}
			#d0d8d1
			{
				position: absolute;
				top: 0px;
				left: 248px;
				height: 500px;
				width: 4px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct4 4s infinite;
			}
			#d0d8d2
			{
				position: absolute;
				top: 248px;
				left: 0px;
				height: 4px;
				width: 500px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct3 4s infinite;
			}
			#d0d9
			{
				top: 150px;
				left: 150px;
				height: 200px;
				width: 200px;
				border-radius: 100%;
				animation:ct2 5s infinite linear;
			}
			#d0d9d1
			{
				position: absolute;
				top: 45px;
				left: 50px;
				height: 0px;
				width: 0px;
				border: solid transparent 50px;
				border-top: 0px;
				border-bottom: rgba(255, 255, 0, 0.3) 86px solid;
			}
			#d0d9d2
			{
				position: absolute;
				top: 70px;
				left: 50px;
				height: 0px;
				width: 0px;
				border: solid transparent 50px;
				border-bottom: 0px;
				border-top: rgba(255, 255, 0, 0.3) 86px solid;
			}
			#d0d10
			{
				left: 125px;
				top: 125px;
				height: 250px;
				width: 250px;
				border-radius: 100%;
				animation:ct1 4s infinite linear;
			}
			#d0d11
			{
				left: -2px;
				top: -2px;
				height: 500px;
				width: 500px;
				border-radius: 100%;
				animation:ct0 5s infinite linear;
			}
			#d0d11d1
			{
				position: absolute;
				top: 0px;
				left: 248px;
				height: 500px;
				width: 4px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct4 3s infinite;
			}
			#d0d11d2
			{
				position: absolute;
				top: 248px;
				left: 0px;
				height: 4px;
				width: 500px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct3 3s infinite;
			}
			#d0d12
			{
				left: -2px;
				top: -2px;
				height: 500px;
				width: 500px;
				border-radius: 100%;
				animation:ct1 7s infinite linear;
			}
			#d0d12d1
			{
				position: absolute;
				top: 0px;
				left: 248px;
				height: 500px;
				width: 4px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct4 6s infinite;
			}
			#d0d12d2
			{
				position: absolute;
				top: 248px;
				left: 0px;
				height: 4px;
				width: 500px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct3 6s infinite;
			}
			#d0d13
			{
				left: 70px;
				top: 70px;
				height: 360px;
				width: 360px;
				border-radius: 100%;
				animation:ct2 5s infinite linear;
			}
			.d0d13c
			{
				position: absolute;
				height: 80px;
				width: 80px;
			}
			#d0d13d1
			{
				animation: ct1 3s infinite linear;
			}
			#d0d13d2
			{
				left: 280px;
				border-radius: 100%;
				animation: ct0 3s infinite linear;
			}
			#d0d13d3
			{
				top: 280px;
				border-radius: 100%;
				animation: ct2 3s infinite linear;
			}
			#d0d13d4
			{
				top: 280px;
				left: 280px;
				animation: ct1 3s infinite linear;
			}
			#d1d1
			{
				overflow: hidden;
				margin: auto;
				text-align: center;
				white-space: nowrap;
				height: 100px;
				width: 10px;
				border: solid 2px aqua;
				border-radius: 5px;
				background-color: black;
				transition: 3s;
			}
			#d1d1:hover
			{
				width: 800px;
				background-color: rgba(0, 255, 180, 0.3);
			}
			#d1d1d1
			{
				position: relative;
				top: 10px;
				overflow: hidden;
				display: inline;
				font-size: 50px;
				color: transparent;
				transition: 1s;
				transition-delay: 0.5s;
			}
			#d1d1d2
			{
				position: relative;
				overflow: hidden;
				display: inline;
				top: 10px;
				margin: 20px;
				font-size: 50px;
				color: transparent;
				border: solid 4px transparent;
				transition: 1s;
				transition-delay: 0.5s;
			}
			#d1d1:hover #d1d1d1
			{
				color: tomato;
			}
			#d1d1:hover #d1d1d2
			{
				border: solid 4px red;
				color: red;
			}
			#d1d2
			{
				position: relative;
				top: 680px;
				overflow: hidden;
				margin: auto;
				text-align: center;
				height: auto;
				width: 100%;
				background-color: black;
			}
			#d1d2d1
			{
				font-size: 30px;
				color: transparent;
				transition: 2s;
			}
			#d1d1:hover+#d1d2 #d1d2d1
			{
				color: violet;
			}
		</style>
	</head>
	<body>
		<div id="bg">
			<div id="d0">
				<div class="mgc" id="d0d1"></div>
				<div class="mgc" id="d0d2"></div>
				<div class="mgc" id="d0d3"></div>
				<div class="mgc" id="d0d4"></div>
				<div class="mgc" id="d0d5"></div>
				<div class="mgc" id="d0d6"></div>
				<div class="mgc" id="d0d7"></div>
				<div class="mgc" id="d0d8">
					<div id="d0d8d1"></div>
					<div id="d0d8d2"></div>
				</div>
				<div class="mgc" id="d0d9">
					<div id="d0d9d1"></div>
					<div id="d0d9d2"></div>
				</div>
				<div class="mgc" id="d0d10"></div>
				<div class="mgc" id="d0d11">
					<div id="d0d11d1"></div>
					<div id="d0d11d2"></div>
				</div>
				<div class="mgc" id="d0d12">
					<div id="d0d12d1"></div>
					<div id="d0d12d2"></div>
				</div>
				<div class="mgc" id="d0d13">
					<div class="d0d13c" id="d0d13d1"></div>
					<div class="d0d13c" id="d0d13d2"></div>
					<div class="d0d13c" id="d0d13d3"></div>
					<div class="d0d13c" id="d0d13d4"></div>
				</div>
			</div>
			<div id="d1">
				<div id="d1d1">
					<div id="d1d1d1">强子爆散-β</div>
					<div id="d1d1d2">XII阶</div>
				</div>
				<div id="d1d2">
					<div id="d1d2d1">借由魔子规导对称破缺导致反常对冲产生高能魔子崩坏并由'质能聚爆'中的导能式(质能聚爆平面式3'4'5'7'12')导向轰击胶子并从中释放巨大能量而引起从夸克层面的物质分解并伴随巨大能量爆炸</div>
				</div>
			</div>
			<!--中心辅助线
			<div style="position: absolute; top: 449px; width: 1000px; height: 2px; background-color: royalblue;"></div>
			<div style="position: absolute; left: 449px; width: 2px; height: 1000px; background-color: royalblue;"></div>
			-->
		</div>
	</body>
</html>